<!--  -->
<template>
  <div class="manage-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="地址管理"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <!--地址列表 -->
    <div class="address-list">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        disabled-text="以下地址超出配送范围"
        default-tag-text="默认"
        @select="onSelect"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, AddressList, Toast } from "vant";
export default {
  data() {
    return {
      chosenAddressId: "",
      list: [],
      //是否从确认订单来的
      isFromConfirmOrder: false,
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    const list = JSON.parse(localStorage.getItem("addressList")) || [];
    list.forEach((item, index) => {
      item.id = String(index + 1);
      item.address = item.addressDetail;
    });
    this.list = list;
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(item) {
      if (this.isFromConfirmOrder) {
        this.$store.commit("genAddressInfo", item);
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
      }
    },
    onAdd() {
      this.$router.push({ name: "UpdateAddress", query: { option: "add" } });
    },
    onEdit(item, index) {
      this.$router.push({
        name: "UpdateAddress",
        query: { option: "edit", index },
      });
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [AddressList.name]: AddressList,
    [Toast.name]: Toast,
  },
  //组件内的导航守卫
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === "ConfirmOrder") {
        //说明从确认订单页面来的
        vm.isFromConfirmOrder = true;
      } else {
        vm.isFromConfirmOrder = false;
      }
    });
  },
};
</script>
<style scoped>
.manage-container {
  font-size: 16px;
  padding: 46px 10px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.manage-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.manage-container >>> .van-address-list__bottom {
  bottom: 30px;
  background-color: transparent;
}
</style>